<template>
  <div class="poster-container" :id="id">
    <img src="@/assets/img/poster/4-1.jpg" class="img-1-1" />
    <img src="@/assets/img/poster/4-2.jpg" class="img-1-1 margin-top" />
    <img src="@/assets/img/poster/4-3.jpg" class="img-1-1 margin-top" />
    <div class="content">
      <div class="title-box">
        <div class="title">{{ formData.deal_name || '请输入' }}</div>
      </div>
      <div class="desc">
        <div class="line">物资：{{ formData.cate_name || '请输入' }}</div>
        <div class="line">数量：{{ String(formData.num) || '请输入' }} <span style="margin: 0 10px">|</span> 成交价：{{ String(formData.deal_money) || '请输入' }}</div>
      </div>
      <img v-if="formData.code" :src="formData.code" class="img-code" />
    </div>
  </div>
</template>
<script>
export default {
  props: {
    id: String,
    formData: {
      type: Object,
      default: () => {},
    },
  },
}
</script>
<style scoped lang="scss">
.poster-container {
  width: 750px;
  height: 1677px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  background: #ffffff;
  .img-1-1 {
    width: 750px;
  }
  .content {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding-top: 761px;
    .title-box {
      width: 600px;
      height: 140px;
      overflow: hidden;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .title {
      width: 600px;
      font-size: 60px;
      line-height: 70px;
      font-family: Alibaba PuHuiTi;
      font-weight: bold;
      color: #ffffff;
      text-align: left;
      -webkit-line-clamp: 2;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
    }
    .img-user {
      width: 587px;
      height: 369px;
      background: #ffffff;
      border-radius: 23px;
      margin-top: 30px;
    }
    .desc {
      margin-top: 33px;
      font-size: 38px;
      font-family: Alibaba PuHuiTi;
      color: #ffffff;
      line-height: 50px;
      text-align: left;
      .line {
        margin-bottom: 12px;
        position: relative;
        width: 580px;
        white-space: nowrap; //文本强制不换行；
        text-overflow: ellipsis; //文本溢出显示省略号；
        overflow: hidden; //溢出的部分隐藏；
      }
    }
    .img-code {
      width: 196px;
      height: 196px;
      position: absolute;
      right: 151px;
      bottom: 218px;
    }
  }
  .mask {
    width: 750px;
    height: 210px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #ffffff 100%);
    position: absolute;
    left: 0;
    top: 542px;
  }
}
.time {
  position: absolute;
  left: 40px;
  top: 229px;
  font-size: 24px;
  font-family: PingFangSC, PingFang SC;
  font-weight: 300;
  color: #ffffff;
  line-height: 33px;
  letter-spacing: 8px;
}
.margin-top {
  margin-top: -1px;
}
</style>
